<template>
<div id="footprint" class="bg-assist" style="min-height: 500px;">
	<sub-page-header title="我的足迹">
		<span @click="clearFootprint" slot="right" class="text-assist">清空</span>
	</sub-page-header>
	<div v-if="footprints.length == 0" class="empty" style="height:500px;margin-top:100px;">
		<img src="../../assets/empty.png" width="64"/><br>您还没有任何足迹~~
	</div>
	<div class="footprints">
		<router-link :to="'/goods/detail/'+item.id" v-for="item in footprints" :key="item.id" tag="div" class="footprint clearfix">
			<img :src="item.thumbnail" alt="">
			<div class="info">
				<p>{{item.title}}</p>
				<p class="bottom"><span class="text-price">£{{item.price}}</span></p>
			</div>
		</router-link>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			footprints: []
		}
	},
	created () {
		let vue = this;
		let history = window.localStorage.getItem('history');
		if (!history) {
			history = '';
		}
		if (history != '') {
			api.get('user/get_historys?id='+history)
			.then(function (response) {
				vue.footprints = response.data;
			});
		}
		
	},
	methods: {
		clearFootprint () {
			window.localStorage.removeItem('history');
			this.footprints = [];
		}
	}
}
</script>

<style scoped>
.footprints {
	margin-bottom: 50px;
}
.footprint {
	padding: 10px 15px;
	background-color: #fff;
}

.footprint img {
	width: 84px;
	height: 84px;
	float: left;
}

.footprint .info {
	padding-left: 94px;
	min-height: 94px;
	border-bottom: 1px solid #eaeaea;
}
</style>